layui和webkit相遇之table学习
table之添加工具条,并监听事件功能:
添加table属性filter
<table class="layui-hide" id="test" lay-filter="demo"></table>首先定义工具条样式
注意: 样式里面添加lay-event事件,这样才能监听到
layui和webkit相遇之table学习
对于上面第二种方式,其实那个jscc的代码基本执行一次就不需要在用了,那么,完全可以写到html文件里面去,用的时候直接调用就可以了.
html代码js如下:
getCheckData=function(id){ //获取选中数据 var checkStatus = table.checkStatus(id) data = checkStatus.data; return JSON.stringify(data); }; getCheck
layui和webkit相遇之table学习
上面获取方式二:
把上面那个方式中的js代码封装到要给函数,然后使用的时候调用函数eval
代码封装示例:
var jscc = /** function test(id) { function test(id) { if(id == null){ id = 'test'; } var checkStatus = table.checkStatus(id) ,data = checkStatus.data;
web.script库(JS、VBS解释器), JavaScript用aar函数重封装方法
测试发现,我理解这个功能错误了..
这个就是建立一个解析js的虚拟机, 然后再虚拟机里运行js代码,
用途: 如果你手里有js代码现成的算法, 那么可以用这个虚拟机运行这个算法,然后再aar里执行这个算法函数.....
web.script库(JS、VBS解释器), JavaScript用aar函数重封装方法
layui和webkit相遇之table学习
aar怎样与table的数据进行互动操作:
获取check选中行数据(json格式)
首先,查看layui中table对应的演示代码如下:
layui和webkit相遇之table学习
table之固定列:
固定列。可选值有：left（固定在左）、right（固定在右）。一旦设定，对应的列将会被固定在左或右，不随滚动条而滚动。
注意：如果是固定在左，该列必须放在表头最前面；如果是固定在右，该列必须放在表头最后面
layui和webkit相遇之table学习
table组件增加表单元素:
增加表单元素稍微复杂
① 先要创建一个表单样式,通过id传递给table单元格
② 再创建table的列元属性里添加样板属性templet = '刚刚创建的id'
示例如下:
先在html代码中添加一个表单元素样式
这里要注意: 这个样式要放到script中,作为js调用
layui和webkit相遇之table学习
layui开启单元格编辑功能:
edit: 'text'
,这个功能是增加在 每一列中的属性里
,{field:'classify', title: '职业', edit: 'text'}这样的话,这样的一列就可以点击然后编辑了.
layui和webkit相遇之table学习
layui开启复选框:
{type:'checkbox'}
注意,添加上面代码之后要在后面加逗号","啊!!!!
,cols: [[ {type:'checkbox'} ,{field:'id', width:80, title: 'ID', sort: true} ,{field:'username', width:80, title: '用户名'}
layui和webkit相遇之table学习
aar对layui表格的重载实现:
查看layui的重载说明
表格重载很多时候，你需要对表格进行重载。比如数据全局搜索。以下方法可以帮你轻松实现这类需求（可任选一种）。
语法说明适用场景
layui和webkit相遇之table学习
那么,如果数据是在aar中生成的,怎样才能传递到html的js中的data呢??
利用wbkitview.external= {}函数.
我们在aar界面程序里定义一个这个函数:
import web.json; wbkitview.external = { getOption = function(){ data = /*** [{"id":10000,"username":"user-0","sex":"女","city":"城
layui和webkit相遇之table学习
那么,如果我已知了数据,应该怎么直接把数据展示在table,而不是通过什么url来间接异步获取呢?
可以利用data直接写到html文件的js里,而不是用url
<script> layui.use('table', function(){ var table =
layui和webkit相遇之table学习
正题开始:
首先查看layui的table表格示例:
将上面测试test.html中代码改为:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>layui</title> <meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Compat
layui和webkit相遇之table学习
看到上面的图片,发现本来应该显示的图标并没有显示.
这个问题,jacen已经在论坛说过,是图标字体经过转换下就可以webkit正常使用了
这里就直接用jacen转换过的替换font下的字体即可.
layui和webkit相遇之table学习
aar与layDate控件的交互:
为了实现交互,调用layDate的交互js函数功能
laydate.render({ elem: '#test20' ,position: 'static' ,done: function(value, date){ //下面调用aar中的函数 external.aardioCall("你选择的日期是: " + value); //alert('你选择的日期是：' + value + '\n获得的对象是' +
layui和webkit相遇之table学习
一个调用layui的layDate时间与日期组件的示例:
html代码:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> body{padding: 20px;} background-color: #fff; border-radius: 2px;} </style> </head> <body>
layui和webkit相遇之table学习
建立webkit窗口: